-𝐘𝐚𝐩𝐩𝐢𝐧𝐠 𝐇𝐨𝐮𝐬𝐞-

امروز یه موزیک پلیر درست کردم و گفتم که برای شما هم به اشتراک بذارم

قیافش میشه اینجوری

play_arrow

Toxic till the end-Rosié

0:000:00

عرضم به حضورتون که جای لینک کاور و موزیک و اسم اهنگ و اکوتالایزر داره. میتونید رنگش رو به سلیقه ی خودتون تغییر بدید البته من اینجا مشکیش رو میذارم به بیشتر به کار همه میاد

ادامه ی مطلب میتونید کد رو بردارید. لطفا فقط اگه جایی استفاده کردید منو تگ کنید یا لینک وبم رو یه بار قرار بدید تو پستتون مرسی :)

   <style>
   .bx-mp{font-family:'Vazir',tahoma,sans-serif;background:#fff;border:2px solid #000;border-radius:50px;padding:6px 12px;margin:10px auto;display:flex;align-items:center;gap:8px;width:90%;max-width:400px;box-sizing:border-box;direction:ltr}
   .bx-info{flex:1;min-width:0}
   .bx-ttl{color:#000;font-size:10px;font-weight:bold;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .bx-prg{height:10px;background:#f0f0f0;border-radius:5px;cursor:pointer;position:relative;margin-bottom:3px;overflow:hidden}
   .bx-wave{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,#000,#333,#666,#333,#000);background-size:200% 100%;border-radius:5px;transition:width 0.1s}
   .bx-wave::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q12 0 25 5 T50 5 T75 5 T100 5' fill='none' stroke='white' stroke-width='1.5' opacity='0.8'/%3E%3C/svg%3E");background-size:40px 100%;animation:waveSlide 0.4s linear infinite}
   @keyframes waveSlide{0%{background-position:0 0}100%{background-position:40px 0}}
   .bx-tm{color:#666;font-size:8px;display:flex;justify-content:space-between;margin-top:2px}
   .bx-pl{width:28px;height:28px;background:#000!important;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff!important;font-size:14px;cursor:pointer;transition:transform 0.2s;flex-shrink:0;font-family:tahoma,sans-serif;font-weight:bold;line-height:1}
   .bx-pl:hover{background:#333!important;transform:scale(1.1)}
   .bx-pl.clicked{animation:clickPulse 0.3s ease}
   @keyframes clickPulse{0%{transform:scale(1)}50%{transform:scale(0.9)}100%{transform:scale(1)}}
   .bx-cov{width:36px;height:36px;min-width:36px;border:2px solid #000;border-radius:50%;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center}
   .bx-cov img{width:100%;height:100%;object-fit:cover !important}
   html.dark .bx-mp{background:#1a1a1a;border-color:#fff}
   html.dark .bx-ttl{color:#fff}
   html.dark .bx-prg{background:#333}
   html.dark .bx-wave{background:linear-gradient(90deg,#fff,#aaa,#666,#aaa,#fff)}
   html.dark .bx-wave::before{stroke:#000}
   html.dark .bx-tm{color:#aaa}
   html.dark .bx-pl{background:#fff!important;color:#000!important}
   html.dark .bx-pl:hover{background:#ddd!important}
   html.dark .bx-cov{border-color:#fff;box-shadow:0 2px 6px rgba(255,255,255,0.2)}
   </style>
   <div class="bx-mp">
   <div class="bx-cov"><img id="bx-img" src="لینک عکس کاور"></div>
   <button class="bx-pl" id="bx-pl">▶</button>
   <div class="bx-info">
   <div class="bx-ttl" id="bx-ttl">اسم آهنگ</div>
   <div class="bx-prg" id="bx-prg"><div class="bx-wave" id="bx-bar"></div></div>
   <div class="bx-tm"><span id="bx-cur">0:00</span><span id="bx-dur">0:00</span></div>
   </div>
   </div>
   <audio id="bx-aud" src="لینک موزیک"></audio>
   <script>
   var a=document.getElementById('bx-aud'),p=document.getElementById('bx-pl'),b=document.getElementById('bx-bar'),pr=document.getElementById('bx-prg'),c=document.getElementById('bx-cur'),d=document.getElementById('bx-dur'),playing=false;
   p.onclick=function(){
       p.classList.remove('clicked');
           void p.offsetWidth;
               p.classList.add('clicked');
                   setTimeout(function(){p.classList.remove('clicked')},300);
                       if(!playing){
                               a.play();
                                       p.innerHTML='||';
                                               playing=true;
                                                   }else{
                                                           a.pause();
                                                                   p.innerHTML='▶';
                                                                           playing=false;
                                                                               }
                                                                               };
                                                                               a.ontimeupdate=function(){b.style.width=(a.currentTime/a.duration*100||0)+'%';c.innerText=Math.floor(a.currentTime/60)+':'+String(Math.floor(a.currentTime%60)).padStart(2,'0')};
                                                                               a.onloadedmetadata=function(){d.innerText=Math.floor(a.duration/60)+':'+String(Math.floor(a.duration%60)).padStart(2,'0')};
                                                                               pr.onclick=function(e){a.currentTime=(e.offsetX/pr.offsetWidth)*a.duration};
                                                                               </script>

فقط کافیه داخل جایی که دارید پست مینویسید اون بالا کدتون رو داخل قسمت اچ تی ام ال قرار بدید. لینک و اسم کاور رو هم ویرایش کنید

میتونید با ور رفتن با کد رنگ ها هم تمش رو عوض کنید یا بدید هوش مصنوعی براتون اکی کنه